<template>
  <div id="pop-up">
    <div id="content-div">
      <slot></slot>
    </div>
    <div id="action-div">
      <button @click="closePopUP()">取消</button>
      <button @click="closePopUP()">确定</button>
    </div>
  </div>
</template>

<script>
import Question from "@/assets/js/Question";

export default {
  name: "PopUp",
  data(){
    return{

    }
  },
  methods: {
    closePopUP() {
      let popUp = document.getElementById("pop-up");
      popUp.style.visibility = "hidden";
      console.log(this.$bus.addType,this.$bus.addQues);
      if(this.$bus.addType === QUES_STYLE.SINGLE){
        let newQues = new Question(this.$bus.addQues.title,[...this.$bus.addQues.options]);
        this.$bus.allQuestion.singleOption.push(newQues);
      }
    },
  },
  mounted() {

  }
}
</script>

<style scoped>
#pop-up {
  background-color: #f6b6a3;
  position: fixed;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
}

#content-div{
  background-color: #5cb85c;
  position: absolute;
  width: 100%;
  height: 90%;
  top: 0;
}

#action-div{
  width: 100%;
  position: absolute;
  bottom: 5px;
  display: flex;
  justify-content: space-around;
}

#action-div>button{
  background-color: aquamarine;
  width: 80px;
  font-size: 16px;
}
</style>